<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <form action="" enctype="application/x-www-form-urlencoded"></form> -->
    用户名:<input type="text" id="user"><span id="userTip"></span>
    <script>
        user.onblur = function() {
            /* 
            1获取用户名  2 发送请求 上传用户名  3 接收响应
            */
            const user = this.value.trim()
            // console.log(user);
            if(!user){
                userTip.textContent = '请输入正确的用户名'
                userTip.style.color = 'red'
                return
            }
            const xhr =new  XMLHttpRequest()
            xhr.open('post','http://localhost:3000/validatorUsername')
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            xhr.send('username='+user)
            xhr.onreadystatechange=function() {
               
                if(xhr.readyState===4 && xhr.status == 200) {
                    // console.log(xhr.responseText);
                    const result = JSON.parse(xhr.responseText)
                    console.log(result);
                    if(result.code === 20000) {
                        userTip.textContent = result.message
                        userTip.style.color = 'green'
                    }else {
                        userTip.textContent = result.message
                        userTip.style.color='red'
                    }
                }
            }
            
        }
    </script>
</body>
</html>